在JS的世界裡到處是物件，在瀏覽器的世界裡到處是事件。

事件驅動

根據JavaScript大全，客戶端JavaScript程式是使用非同步的事件驅動程式設計模型。
這種模型最大的特色是程式執行的流程是根據使用者的行為而定，這些行為可能是在鍵盤輸入一串文字或是用滑鼠點擊了頁面某個元素，這些行為發生的當下就會產生一個事件。

而前端開發者要做的事就是針對關心的事件預先設計好相對應的流程。

題外話：除了事件驅動設計模型，維基百科還提到了其他兩種設計模型：

1. 批次程式設計：程式執行的流程是由程式設計師來決定
2. 資料驅動程式設計：程式語句描述要匹配的資料，和對它需要做的處理，程式本身不定義選取資料的一序列檔案操作步驟

常見事件類型

老大哥監聽的事件類型包山包海，以下先條列常使用到的類型就好：

滑鼠事件

• click: 滑鼠點擊元素
• mouseover: 滑鼠經過元素
• mouseout: 滑鼠離開元素

鍵盤事件

• keydown: 使用者按下某個鍵盤按鍵
• keyup: 使用者放開某個鍵盤按鍵

表單事件

• submit: 使用者提交表單
• focus: 使用者點擊某個輸入框

事件監聽方式

成為老大哥的第一步就是學會裝監聽器，主要有下面兩種方法：
說明書上說，第二種方法比較新，推薦要成為監聽強者的大哥們使用

假設我們要做出一個驚奇按鈕，在使用者點擊後，按鈕的文字和顏色會改變，來看看兩者的寫法差異和優缺點

• on-event： on 之後接著事件名稱，例如：onclick, onmouseover, onload等等，必須全小寫

const button = document.querySelector('button')

function changeContent() {button.textContent = 'Hey You';}
function changeColor() {button.style.backgroundColor = '#dd1104';}

button.onclick = changeContent;
button.onclick = changeColor;

實驗結果發現，當有一個以上的處理器，後者會覆寫之前註冊的處理器，在這個例子中，按下按鈕後只會改變顏色，但按鈕中的文字不會改變。

這是因為這個方式當初在設計時，開發者認為事件目標最多只會有一個處理器。所以如果我們對於一個事件需要多個處理器時，就必須用下面的語法

• addEventListener():

先來看看語法規則，addEventListener的括號中接受三個引數，依序是：

1. 註冊處理器的事件類型，必須是一個字串
2. 事件發生時要觸發的函式
3. 布林值或物件

const button = document.querySelector('button')

function changeContent() {button.textContent = 'Hey You';}
function changeColor() {button.style.backgroundColor = '#dd1104';}

button.addEventListener('click', changeContent);
button.addEventListener('click', changeColor);

成功完成想要的效果～

為了成為讓人聞之喪膽的老大哥，一起來好好練習addEventListener()吧！

參考資料：

JavaScript 大全
前端開發思維轉變——從事件驅動到資料驅動
資料驅動編程
事件驅動程式設計